<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
  import {bridgeImg, hubImg, nodeImg} from '@/assets/base64Img.js'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    // generateGraphLines(initData, nodes, links) {
    //   if (initData === undefined || initData == null) {
    //     return
    //   }
    //   // 节点信息
    //   let node = {
    //     name: initData.name,
    //     tooltip: {
    //       formatter: "{b}"
    //     },
    //     symbol: bridgeImg,
    //     symbolSize: [60, 40],
    //     value: [initData.x, initData.y]
    //   }
    //   // 添加节点
    //   nodes.push(node);
    //   // 递归遍历子节点
    //   if ("children" in initData) {
    //     let children = initData.children;
    //     let curveness, colork, colorn;
    //     for (let i = 0; i < children.length; i++) {
    //       if (children[i].ifend === 1 || children[i] === '1') {
    //         // 节点信息
    //         let node = {
    //           name: initData.name,
    //           tooltip: {
    //             formatter: "{b}"
    //           },
    //           symbol: bridgeImg,
    //           symbolSize: [60, 40],
    //           value: [children[i].x, children[i].y],
    //           ifend: children[i].ifend
    //         }
    //         // 添加节点
    //         nodes.push(node);
    //       }
    //       // 连接线对称
    //       curveness = children[i].fx === 1 ? 0.1 : -0.1;
    //       colork = (children[i].code === '2' || children[i].code === 2) ? '#C75050' : '#53B5EA';
    //
    //       // port label && padding
    //       let padding = [0, 0, 0, 0];
    //       let port = "";
    //       if (initData.type === 'bridge') {
    //         // 生成 label padding
    //         let vector = [children[i].x-initData.x, children[i].y-initData.y];
    //         padding = this.generatePadding(vector)
    //         port = "Port-" + (i + 1);
    //       }
    //
    //       // 连线信息
    //       let link = {
    //         source: initData.name,
    //         target: children[i].name,
    //         lineStyle: {
    //           curveness: curveness,
    //           color: colork
    //         },
    //         label: {
    //           show: true,
    //           position: 'middle',
    //           padding: padding,
    //           formatter: port,
    //           color: '#f759ab'
    //         }
    //       };
    //       // 添加连线
    //       links.push(link);
    //
    //       // 递归遍历
    //       if ("children" in children[i]) {
    //         this.generateGraphLines(children[i], nodes, links);
    //       }
    //     }
    //   }
    //
    // },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
